<template>
  <div class="home">
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in imgList" :key="index">
        <img :src="item">
      </van-swipe-item>
    </van-swipe>
    <div class="home">
      <div>
        <ul class="nav-box">
          <li class="nav-item">
            <i>
              <img src="../assets/imgs/menu01.png" alt>
            </i>
            <p>新闻资讯</p>
          </li>
          <li class="nav-item">
            <i>
              <img src="../assets/imgs/menu02.png" alt>
            </i>
            <p>图片分享</p>
          </li>
          <li class="nav-item">
            <i>
              <img src="../assets/imgs/menu03.png" alt>
            </i>
            <p>商品购买</p>
          </li>
          <li class="nav-item">
            <i>
              <img src="../assets/imgs/menu04.png" alt>
            </i>
            <p>留言反馈</p>
          </li>
          <li class="nav-item">
            <i>
              <img src="../assets/imgs/menu05.png" alt>
            </i>
            <p>视频专区</p>
          </li>
          <li class="nav-item">
            <i>
              <img src="../assets/imgs/menu06.png" alt>
            </i>
            <p>反馈我们</p>
          </li>
        </ul>
        <van-tabbar v-model="active">
          <van-tabbar-item icon="home-o">首页</van-tabbar-item>
          <van-tabbar-item icon="manager-o" >会员</van-tabbar-item>
          <van-tabbar-item icon="shopping-cart-o" >购物车</van-tabbar-item>
          <van-tabbar-item icon="search" >搜索</van-tabbar-item>
        </van-tabbar>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      imgList: [
        'http://m.itcast.cn/images/newslide/homepageandphone/20181528141522828.jpg',
        'http://m.itcast.cn/images/newslide/homepageandphone/20180918170957294.jpg',
        'http://m.itcast.cn/images/newslide/homepageandphone/20184827134845878.jpg'
      ],
      active: 0
    }
  }
}
</script>
<style lang="scss" scoped>
  .home {
    .van-swipe {
      height: 205px;
      img {
        height: 100%;
        width: 100%;
      }
    }
    .nav-box {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      height: 100%;
      .nav-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 33.33%;
        margin: 10px 0;
        cursor: pointer;
        p {
          font-size: 20px;
        }
        img {
          width: 60px;
          height: 60px;
        }
      }
    }
  }
</style>
